<template>
	<view class="routine_box">
		<view class="category_label">
			<view class="category_label_icon"></view>
			<view class="category_label_text">服务描述</view>
		</view>
		<textarea
			v-model="formInfo.description"
			class="input_description"
			:maxlength="200"
			placeholder-class="input_description_placeholder"
			placeholder="输入描述，让大家了解更多内容。（最多200字）"></textarea>
		<view class="upload_box">
			<upload v-model="formInfo.picList" :sourceType="['album', 'camera']" uploadUrl="/api/mall/order-service-daily/uploadCoverPic"></upload>
			<view class="upload_tips">上传图片，最多9张。</view>
		</view>
		<view class="upload_box">
			<upload
				v-model="formInfo.videoList"
				cover
				:mediaType="['video']"
				:sourceType="['album', 'camera']"
				:count="3"
				uploadUrl="/api/mall/order-service-daily/uploadCoverPic"></upload>
			<view class="upload_tips">上传视频，最多3个。</view>
		</view>
		<!-- <input v-model="formInfo.title" class="input_title" maxlength="20" placeholder-class="input_title_placeholder" placeholder="输入标题" /> -->
		<view class="public_box" v-if="orderId">
			<view>是否公开</view>
			<switch class="public_switch" color="#FF6188 " :checked="formInfo.openFlag" @change="handleDelFlagChange" />
		</view>
		<view class="tips_box">注意：此订单有关联的单独增值服务订单，请注意是否提供服务</view>
		<view class="footer_box">
			<view class="footer_button" @tap="submitInfo">提交</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, computed, ref } from "vue";
import api from "@/api";
import { onLoad, onBackPress } from "@dcloudio/uni-app";

const orderId = ref("");
let studioId = "";
let userId = "";
let formInfo = reactive({
	title: "",
	description: "",
	picList: [],
	videoList: [],
	openFlag: true
});
let canBack = false;
onLoad((data) => {
	orderId.value = data.orderId;
	studioId = data.studioId;
	userId = data.userId; // 陪宠师ID
	const serviceRoutine = uni.getStorageSync("serviceRoutine") || {};
	formInfo = Object.assign(formInfo, serviceRoutine[orderId.value] || {});
});

onBackPress(() => {
	if (canBack) {
		return false;
	}
	uni.showModal({
		title: "温馨提示",
		content: "是否保存草稿",
		showCancel: true,
		cancelText: "取消",
		confirmText: "确定",
		success: (res) => {
			canBack = true;
			if (res.confirm) {
				saveDraft();
				uni.navigateBack();
			} else if (res.cancel) {
				uni.navigateBack();
			}
		}
	});
	return true;
});

const saveDraft = () => {
	let serviceRoutine = {};
	serviceRoutine = uni.getStorageSync("serviceRoutine") || {};
	serviceRoutine[orderId.value] = formInfo;
	uni.setStorageSync("serviceRoutine", serviceRoutine);
};
const deleteDraft = () => {
	let serviceRoutine = {};
	serviceRoutine = uni.getStorageSync("serviceRoutine") || {};
	if (serviceRoutine[orderId.value]) {
		delete serviceRoutine[orderId.value];
	}
	uni.setStorageSync("serviceRoutine", serviceRoutine);
};

const submitInfo = async () => {
	if (!validateFormInfo()) return false;
	let params = {
		orderDetailId: orderId.value,
		studioId: studioId,
		coverPics: formInfo.picList,
		videos: JSON.stringify(formInfo.videoList),
		title: formInfo.title,
		content: formInfo.description,
		openFlag: formInfo.openFlag ? 0 : 1, // 0-公开 1不公开
		userId
	};
	if (orderId.value) {
		delete params.studioId;
	} else if (studioId) {
		delete params.orderDetailId;
	}
	const res = await api({
		method: "POST",
		url: "/mall/order-service-daily/submitV2",
		data: params
	});
	if (res.code != 0) {
		uni.showToast({
			icon: "none",
			title: res.msg
		});
		return false;
	}

	uni.showToast({
		icon: "none",
		title: "提交成功"
	});

	uni.redirectTo({
		url: `/pages/petsOrder/serviceFinished/index`
	});
	// uni.navigateBack()

	deleteDraft();
};

const validateFormInfo = () => {
	const validationList = [isDescriptionEmpty, isPicListOrVideoListEmpty, isVideoCoverEmpty];
	return validationList.every((fn) => {
		if (fn instanceof Function) {
			return fn();
		}
	});
};
const isDescriptionEmpty = () => {
	const description = (formInfo.description && formInfo.description.trim()) || "";
	if (description.length == 0) {
		uni.showToast({
			icon: "none",
			title: "请填写服务描述"
		});
		return false;
	}
	return true;
};
const isPicListOrVideoListEmpty = () => {
	if (formInfo.picList.length == 0 && formInfo.videoList.length == 0) {
		uni.showToast({
			icon: "none",
			title: "请至少上传一张图片或一个视频"
		});
		return false;
	}
	return true;
};
const isVideoCoverEmpty = () => {
	if (formInfo.videoList.length == 0) return true;

	const result = formInfo.videoList.every((item) => item.cover);
	if (!result) {
		uni.showToast({
			icon: "none",
			title: "请上传视频封面"
		});
		return false;
	}
	return true;
};

const handleDelFlagChange = (e) => {
	formInfo.openFlag = e.detail.value;
};
</script>

<style lang="scss" scoped>
.routine_box {
	min-height: 100vh;
	box-sizing: border-box;
	background: #ffffff;
	padding: 40rpx;
	padding-bottom: calc(134rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(134rpx + env(safe-area-inset-bottom));

	.upload_box {
		margin-bottom: 48rpx;

		.upload_tips {
			margin-top: 24rpx;
			font-size: 26rpx;
			color: #5c5e5e;
		}
	}

	.input_title {
		margin-top: 96rpx;
		margin-bottom: 64rpx;
		background-color: #ffffff;
		font-weight: bold;
		font-size: 36rpx;
		color: #1b2120;

		.input_title_placeholder {
			font-weight: bold;
			font-size: 36rpx;
			color: #cacccc;
		}
	}

	.input_description {
		width: 100%;
		height: 550rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		font-size: 30rpx;
		color: #1b2120;
		line-height: 1.5;
		.input_description_placeholder {
			font-size: 30rpx;
			color: #cacccc;
		}
	}

	.footer_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 6rpx 32rpx;
		padding-bottom: calc(6rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(6rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		border-top: 1rpx solid #e4e6e6;
		background-color: #ffffff;
		z-index: 1;

		.footer_button {
			height: 88rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			border-radius: 62rpx;
			font-size: 28rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
		}
	}
}

.category_label {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;

	.category_label_icon {
		width: 8rpx;
		height: 32rpx;
		background: #ff6084;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 16rpx;
	}
	.category_label_text {
		font-weight: bold;
		font-size: 36rpx;
		color: #1b2120;
	}
}

.public_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 32rpx;
	color: #1b2120;
	margin: 48rpx 0;

	.public_switch {
		transform: scale(0.8);
	}
}

.tips_box {
	margin: 48rpx 0;
	font-size: 24rpx;
	color: #7c807f;
	line-height: 1.4;
}
</style>
